<!DOCTYPE html>
<html lang="en">
<!-- 数组的其他元素有空也多练练  https://www.runoob.com/jsref/jsref-obj-array.html-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const arr = new Array(1, 3, 4, 11, 33, 23, 32, 322, 111, 321, 444);

        /*  
             filter()筛选符合条件的元素 并且作为一个新数组返回

              对数组里的每一个元素都执行一个function进行筛选，返回一个符合条件的新数组

              必须参数: callback 可选参数 thisValue (设置回调函数的this)

              callback()里 必须参数 element 代表数组元素   
        */
        const arr2 = arr.filter(ele => {
            if (ele > 11) {
                return ele
            }
        })

        const arr99 = arr.filter(ele => ele > 11)
        console.log(1, arr99);
        console.log(2, arr2);


        /* 
            map():对数组中的每一个元素进行回调函数处理，并且返回一个新的数组
            参数同上
            实例：对每个元素都*2
        */
        const arr3 = arr2.map(function (element, index, arr) {
            return element * 2
        })
        console.log(arr3);

        /* 
            reduce(callback,initvalue): 对数组每一个值做一个函数回调(计算操作)，最终返回一个最终的值
            必须参数 callback(total element index arr) 可选参数initvalue:这个是total的初始值 不传这个参数的时候 total的默认参数是个对象
            callback里的必须参数有两个 total 每次计算结束后的返回值 element 数组里的元素 
            案例:计算数组的总和
        */
        const total = arr3.reduce(
            (total, ele) => {
                return total + ele;
            }
        )
        console.log('total value', total);

        //链式编程+箭头函数 
        const arrx = arr.filter(x => {
            return x > 11
        }).map(x => {
            return x * 2
        }).reduce((total, x) => {
            return total + x
        }, 1000);
        console.log(arrx);



        /* 
               foreach:将数组里面的所有的元素依次作为参数，传递给回调函数 并且调用函数
               array.forEach(function(currentValue, index, arr), thisValue)
        */
        arr.forEach((ele, index, arr) => {
            console.log('foreach',arr, index, ele);
        })

        // find:find() 方法返回通过测试（函数内判断）的数组的第一个元素的值.没找到的话返回undefined
        // 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
        const res = arr.find((ele,index,value)=>{
            return ele < 3
        })
        console.log(res);
    </script>
</body>

</html>